<style lang="less">
  .PP_DetailBox{
    position: relative;
    .el-tabs--card {
      > .el-tabs__header{
        border-width:2px;
        .el-tabs__nav-wrap{
          margin-bottom: -2px;
        }
        .el-tabs__item{
          border: 2px solid #f7931e;
          border-radius: 0;
          border-right: none;
          &:last-child{
            border-right: 2px solid #f7931e;
          }
        }
      }
      .el-tabs__content{
        .richTextView{
          height: 550px;
          overflow: auto;
        }
      }
    }
    .btnBox{
      padding: 2rem 0 ;
      .el-button{
        width: 15rem;
        margin-right: 2rem;
        border-color: #63c5ce;
      }
      .el-button--default{
        color: #63c5ce;
      }
    }
  }
</style>

<template>
  <div class="PP_DetailBox">
    <el-tabs v-model="activeTap" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="BASEINFO">
        <input-box
          :formData='respData'
          :formDisabled='formDisabled'
        ></input-box>
      </el-tab-pane>

      <el-tab-pane label="产品介绍" name="INTRODUCE">
        <div class="richTextView" v-if='this.$route.name =="privatePlacementListCheck"' v-html='respData.introduce'></div>
        <div v-else>
          <rich-text-box
          :id='"INTRODUCE"'></rich-text-box>
        </div>
      </el-tab-pane>

      <el-tab-pane label="项目明细" name="PROJECT_DETAIL">
        <div class="richTextView" v-if='this.$route.name =="privatePlacementListCheck"' v-html='respData.projectDetail'></div>
        <div v-else>
          <rich-text-box
          :id='"PROJECT_DETAIL"'></rich-text-box>
        </div>
      </el-tab-pane>

      <el-tab-pane label="风险控制" name="RISK_CTROL">
        <div class="richTextView" v-if='this.$route.name =="privatePlacementListCheck"' v-html='respData.riskCtrol'></div>
        <div v-else>
          <rich-text-box
          :id='"RISK_CTROL"'></rich-text-box>
        </div>
      </el-tab-pane>

    </el-tabs>

    <div class="btnBox" v-show='activeTap !="BASEINFO"'>
      <el-button @click='goPage("privatePlacementList")'>取消</el-button>
      <el-button type="primary" @click='submitRichText' v-if="this.$route.name !='privatePlacementListCheck'">确定</el-button>
    </div>
  </div>
</template>


<script>
  import inputBox from './detailInputBox.vue'
  import richTextBox from 'components/tinymce'
  import {postUpdateRichTextCont, getPPDetail} from 'api/privatePlacement'
  import {postLog} from 'api/common'

  export default {
    components:{
      inputBox,
      richTextBox,

    },
    data() {
      return {
        productId:this.$route.query && this.$route.query.productId ? this.$route.query.productId :null,
        formDisabled:false,//基本信息是否可编辑，创建后不可编辑！
        activeTap: sessionStorage.getItem('ppActiveTap') ? sessionStorage.getItem('ppActiveTap') :'BASEINFO',//BASEINFO:基本信息 , INTRODUCE : 产品介绍 , PROJECT_DETAIL : 项目明细 , RISK_CTROL: 风控措施
        respData:{
          creatorId:sessionStorage.getItem('HKid'),
          creator:sessionStorage.getItem('USER_NAME'),
          productNo:'',
          productName:'',
          maxRate:'',
          minRate:'',
          raiseLimit:'',
          minPurchaseAmount:'',
          issuerId:'',
          productTermStr:'',
          riskLevel:'',
          label01:'',
          labelColor01:this.getRandomColor(),
          label02:'',
          labelColor02:this.getRandomColor(),
          label03:'',
          labelColor03:this.getRandomColor(),
          label04:'',
          labelColor04:this.getRandomColor(),
        },
        richArr:[],
        initRichCont:false,
      };
    },
    methods: {
      getRandomColor(){ 
        if(this.$route.query && this.$route.query.productId) {
          return null
        }
        return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); 
      },
      handleClick(tab, event) {
        if(!this.initRichCont && this.$route.name !='privatePlacementListCheck'){
          this.setRichTextCont(this.richArr)
          this.initRichCont = true;
        }
      },
      setRichTextCont(arr){
        for(let i = 0; i<arr.length;i++){
          // console.log('---',i,arr[i].name,arr[i].cont)
          tinymce.get(arr[i].name).setContent(arr[i].cont)
        }
      },
      async getPPDetail(id){
        try{
          let params ={
            userId:sessionStorage.getItem('HKid'),
            productId:id
          }
          let back = await getPPDetail(params)
          back = back.data;
          console.log('getPPDetail', id , back)
          if(back && back.resultCode == '200'){
            let result = back && back.result;
            this.respData = Object.assign({}, this.respData , result)
            this.richArr =[
              {
                name:'INTRODUCE',
                cont:result &&result.introduce ? result &&result.introduce : ''
              },
              {
                name:'PROJECT_DETAIL',
                cont:result &&result.projectDetail ? result &&result.projectDetail : ''
              },
              {
                name:'RISK_CTROL',
                cont:result &&result.riskCtrol ? result &&result.riskCtrol : ''
              },
            ]
          }else{
            this.$alert(back.msg)
          }
        }catch(err){
          this.$alert('请求失败，请稍后重试')
          console.error(err)
        }
      },
      async submitRichText(){
        let id = this.$route.query && this.$route.query.productId ? this.$route.query.productId : null;
        if(!id){
          this.$alert('请先保存产品基本信息！')
          return
        }
        console.log(this.activeTap , tinymce.get(this.activeTap).getContent())
        try{
          let params ={
            productId:id,
            privateProductExra:this.activeTap,
          }
          let exraType ='';
          if(this.activeTap == 'INTRODUCE'){
            exraType = 'introduce'
          }else if(this.activeTap == 'PROJECT_DETAIL'){
            exraType = 'projectDetail'

          }else if(this.activeTap == 'RISK_CTROL'){
            exraType = 'riskCtrol'
          }
          params[exraType] = tinymce.get(this.activeTap).getContent()
          let back = await postUpdateRichTextCont(params)
          back = back.data
          console.log('submitRichText', back)
          if(back && back.resultCode ==='200'){
            this.$alert('保存成功')
            //发送日志
            let productName = back.result && back.result.productName ? back.result.productName:this.respData.productName;
            postLog('PRIVATE_PLACEMENT_LIST_EDIT', id, productName, params)
          }else{
            this.$alert(back.msg)
          }

        }catch(err){
          
          console.error(err)
        }
      },
      goPage(name,query){
        this.$router.push({
          name:name,
          query:query,
        })
      }
    },
    created () {
      console.warn(this.activeTap)
      console.log(this.$route.query)
      if(this.productId){
          this.getPPDetail(this.productId)
      }
    },
    destroyed(){
      sessionStorage.removeItem('ppActiveTap')
    }
    
  }
</script>
